
// document.write("<script language='javascript' src='bundles/v5v5/js/toolbar.js'></script>");
	var canvas = document.getElementById('myCanvas');
	var stage = new JTopo.Stage(canvas);
	// stage.frames = 3;
	stage.eagleEye.visible = true;
	stage.wheelZoom = 0.85;//启用鼠标滚轮缩放：

	// showJTopoToobar(stage);
	var scene = new JTopo.Scene(stage);
	scene.mode = "select";
	scene.areaSelect = false;

	$(".1").bind("click",function(){
        stage.mode = "select";
		// scene.removeAllEventListener();
        var currentNode=$(this);
        var text1 = $(this).attr('id');
        var dashedPattern = null;

        if (text1=="rectangle") {
            drawRect();
        }
        else if (text1=="line") {
            
                $(".dropdown-menu .2").bind("click",function(){
                        var text2 = $(this).attr('id');
                        if (text2=="xuxian") {
                        dashedPattern = 5;
                        drawLine(dashedPattern,"xuxian");
                    }
                    else if (text2=="shixian") {
                        dashedPattern = null;
                        drawLine(dashedPattern,"shixian");
                    }
                    else if (text2=="quxian") {
                        dashedPattern = null;
                        drawLine(dashedPattern,"quxian");
                    }
                    else if (text2=="zhexian") {
                        dashedPattern = null;
                        drawLine(dashedPattern,"zhexian");
                    }
                    else if (text2=="cuxian") {
                        dashedPattern = null;
                        drawLine(dashedPattern,"cuxian");
                    }
                    else if (text2=="jiantou"){
                        dashedPattern = null;
                        drawLine(dashedPattern,"jiantou");
                    }
                    else if (text2=="lianxian"){
                        connectLine();
                    }
                    else{
                       console.log(text2+"limian");
                    }
             });
        }

        else if (text1=="circle") {
            drawArc();
        }
        else if (text1=="delete") {
            removeEle();
        }
        else if (text1=="export") {
            exportpng();
        }
        else if (text1=="insertText") {
            insertTextfield();
        }
        //else{
           console.log(text1+"waimian");// alert(text1+"waimian");
        //}

  
	});
function removeEle(){
    scene.clear();
}

function exportpng(){
    // stage.saveImageInfo();
    stage.saveAsLocalImage();
}

function drawLine(dashedPattern,text){
    scene.removeAllEventListener();
    scene.mode="default";
    var from,to;
    var lineWidth = 3;
    var x1,y1,x2,y2;
    var radius=0;
    scene.addEventListener("mousedown",function(event){
            var e = event || window.event;
            var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
            var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
            x1 = e.pageX || e.clientX + scrollX;
            y1 = e.pageY || e.clientY + scrollY;
            from = newNode(x1,y1,4,4,"");
        });
    scene.addEventListener("mouseup",function(event){
        var e = event || window.event;
            var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
            var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
            x2 = (e.pageX || e.clientX + scrollX);
            y2 = (e.pageY || e.clientY + scrollY);
        to = newNode(x2,y2,4,4,"");
        if (text=="quxian") {
            newCurveLink(from, to, "", dashedPattern);
            scene.removeAllEventListener();
        }
        else if (text=="jiantou") {
            radius=10;
            newLink(from, to, "", dashedPattern,lineWidth,radius);
            scene.removeAllEventListener();
        }
        else if (text=="zhexian") {
            newFoldLink(from,to,"",dashedPattern,radius);
            scene.removeAllEventListener();
        }
        else if (text=="cuxian") {
            lineWidth = 5;
            newLink(from, to, "", dashedPattern,lineWidth,radius);
            scene.removeAllEventListener();
        }
        else{
            newLink(from, to, "", dashedPattern,lineWidth,radius);
            scene.removeAllEventListener();
        }
        scene.removeAllEventListener();
        }); 

	
    
}


function drawRect(){
	var x,y,w,h;
	scene.addEventListener("mousedown",function(event){
		var e = event || window.event;
            var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
            var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
            x = e.pageX || e.clientX + scrollX-50;
            y = e.pageY || e.clientY + scrollY-50;

		});
	scene.addEventListener("mouseup",function(event){
		var e = event || window.event;
            var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
            var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
            w = Math.abs((e.pageX || e.clientX + scrollX) - x);
            h = Math.abs((e.pageY || e.clientY + scrollY) - y);
		var node = newNode(x,y,w,h,"");
        scene.removeAllEventListener();
        node.addEventListener('mouseup', function(event){
                currentNode = this;
                handler(event);
		});
        newText();
    });
}

function drawArc(){
	var radius,x,y,w,h;
	scene.addEventListener("mousedown",function(event){
		var e = event || window.event;
            var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
            var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
            x = e.pageX || e.clientX + scrollX -50;
            y = e.pageY || e.clientY + scrollY -50;
            // alert(x);
		});
	scene.addEventListener("mouseup",function(event){
		var e = event || window.event;
            var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
            var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
            w = (e.pageX || e.clientX + scrollX) - x ;
            h = (e.pageY || e.clientY + scrollY) - y ;
            radius = Math.sqrt(Math.pow(w,2)+Math.pow(h,2))/2;
		var circle = newCircle(radius,x,y,"");
        scene.removeAllEventListener();
        circle.addEventListener('mouseup', function(event){
                currentNode = this;
                handler(event);
            });
        newText();
		});

	
}

function insertTextfield(){
    var x,y;
    scene.addEventListener("mousedown",function(event){
        var e = event || window.event;
            var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
            var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
            x = e.pageX || e.clientX + scrollX;
            y = e.pageY || e.clientY + scrollY;
        x = event.pageX;
        y = event.pageY;
            var node = new JTopo.TextNode("双击修改文字");
                node.setLocation(x, y);
                node.zIndex++;
                node.font = 'italic bold 30px 微软雅黑';
                node.fontColor = '0,0,0';
                node.setBound(250, 50);
                scene.add(node);
                scene.removeAllEventListener();
                newText();
        });
}
function newText(){
    var textfield = $("#jtopo_textfield");
    scene.addEventListener("dbclick",function(event){
                if(event.target == null) return;
                var e = event.target;
                textfield.css({
                    top: event.pageY,
                    left: event.pageX - e.width/2
                }).show().attr('value', e.text).focus().select();
                e.text = "";
                textfield[0].JTopoNode = e;
            });
            
            $("#jtopo_textfield").blur(function(){
                textfield[0].JTopoNode.text = textfield.hide().val();
            });
        }

// 节点
                function newNode(x, y, w, h, text){
                    var node = new JTopo.Node(text);
                    node.setLocation(x, y);
                    node.setSize(w, h);
                    node.fontColor = '0,0,0';
                    scene.add(node);
                    return node;
                }
            
            // 简单连线
            function newLink(nodeA, nodeZ, text, dashedPattern,lineWidth,radius){
                var link = new JTopo.Link(nodeA, nodeZ, text);        
                link.lineWidth = lineWidth; // 线宽
                link.dashedPattern = dashedPattern; // 虚线
                link.bundleOffset = 60; // 折线拐角处的长度
                link.bundleGap = 20; // 线条之间的间隔
                link.textOffsetY = 3; // 文本偏移量（向下3个像素）
                link.strokeColor = '0,200,255';
                link.arrowsRadius = radius;
                scene.add(link);
                return link;
            }

               function newArrowLink(nodeA, nodeZ, text, dashedPattern){
                var link = new JTopo.Link(nodeA, nodeZ, text);        
                link.lineWidth = 3; // 线宽
                link.arrowsRadius = 10;
                link.dashedPattern = dashedPattern; // 虚线
                link.bundleOffset = 60; // 折线拐角处的长度
                link.bundleGap = 20; // 线条之间的间隔
                link.textOffsetY = 3; // 文本偏移量（向下3个像素）
                link.strokeColor = '0,200,255';
                scene.add(link);
                return link;
            }
            
            // 曲线
            function newCurveLink(nodeA, nodeZ, text,dashedPattern){
                var link = new JTopo.CurveLink(nodeA, nodeZ, text);
                link.lineWidth = 3; // 线宽
                link.dashedPattern = dashedPattern;
                scene.add(link);
                return link;
            }

            // 折线
            function newFoldLink(nodeA, nodeZ, text,dashedPattern){
                var link = new JTopo.FoldLink(nodeA, nodeZ, text);
                // link.direction = direction || 'horizontal';
                link.arrowsRadius = 15; //箭头大小
                link.lineWidth = 3; // 线宽
                link.bundleOffset = 60; // 折线拐角处的长度
                link.bundleGap = 20; // 线条之间的间隔
                link.textOffsetY = 3; // 文本偏移量（向下3个像素）
                link.strokeColor = JTopo.util.randomColor(); // 线条颜色随机
                link.dashedPattern = dashedPattern;
                scene.add(link);
                return link;
            }
            
            // 二次折线
            function newFlexionalLink(nodeA, nodeZ, text, direction, dashedPattern){
                var link = new JTopo.FlexionalLink(nodeA, nodeZ, text);
                link.direction = direction || 'horizontal';
                link.arrowsRadius = 10;
                link.lineWidth = 3; // 线宽
                link.offsetGap = 35;
                link.bundleGap = 15; // 线条之间的间隔
                link.textOffsetY = 10; // 文本偏移量（向下15个像素）
                link.strokeColor = '0,250,0';
                link.dashedPattern = dashedPattern; 
                scene.add(link);
                return link;
            }
            
            // 曲线
            function newCurveLink(nodeA, nodeZ, text){
                var link = new JTopo.CurveLink(nodeA, nodeZ, text);
                link.lineWidth = 3; // 线宽
                scene.add(link);
                return link;
            }
            // 画圆
            function newCircle(radius,x,y,text){
              	var circleNode = new JTopo.CircleNode(text);
            	circleNode.radius = radius; // 半径
            	circleNode.alpha = 0.7;
                circleNode.fontColor = '0,0,0';
            	circleNode.fillColor = '0, 0, 255'; // 填充颜色
            	circleNode.setLocation(x, y);
            	circleNode.textPosition = 'Middle_Center'; // 文本位置
            	scene.add(circleNode);
                return circleNode;
            }


$("#contextmenu a").click(function(){
                var text = $(this).text();
                
                if(text == '删除该节点'){
                    scene.remove(currentNode);
                    currentNode = null;
                }else if(text == '撤销上一次操作'){
                    currentNode.restore();
                }else if (text == '编辑') {
                    stage.mode ="edit";
                }else{
                    currentNode.save();
                }
                
                if(text == '更改颜色'){
                    currentNode.fillColor = JTopo.util.randomColor();
                }else if(text == '顺时针旋转'){
                    currentNode.rotate += 0.5;
                }else if(text == '逆时针旋转'){
                    currentNode.rotate -= 0.5;
                }else if(text == '放大'){
                    currentNode.scaleX += 0.2;
                    currentNode.scaleY += 0.2;
                }else if(text == '缩小'){
                    currentNode.scaleX -= 0.2;
                    currentNode.scaleY -= 0.2;
                }
                $("#contextmenu").hide();
            });

            var currentNode = null;
            function handler(event){
                if(event.button == 2){// 右键
                    // 当前位置弹出菜单（div）
                    $("#contextmenu").css({
                        top: event.pageY,
                        left: event.pageX
                    }).show();    
                }
            }
            
            stage.click(function(event){
                if(event.button == 0){// 右键
                    // 关闭弹出菜单（div）
                    $("#contextmenu").hide();
                    stage.mode="select";
                }
            });

function connectLine(){
            scene.removeAllEventListener();
            var beginNode = null;
            var tempNodeA = new JTopo.Node('tempA');;
            tempNodeA.setSize(1, 1);
            
            var tempNodeZ = new JTopo.Node('tempZ');;
            tempNodeZ.setSize(1, 1);
            
            var link = new JTopo.Link(tempNodeA, tempNodeZ);
            
            scene.mouseup(function(e){
                if(e.button == 2){
                    scene.remove(link);
                    return;
                }
                if(e.target != null && e.target instanceof JTopo.Node){
                    if(beginNode == null){
                        beginNode = e.target;
                        scene.add(link);
                        tempNodeA.setLocation(e.x, e.y);
                        tempNodeZ.setLocation(e.x, e.y);
                    }else if(beginNode !== e.target){
                        var endNode = e.target;
                        var l = new JTopo.Link(beginNode, endNode);
                        scene.add(l);
                        beginNode = null;
                        scene.remove(link);
                    }else{
                        beginNode = null;
                    }
                }else{
                    scene.remove(link);
                }
            });
            
            scene.mousedown(function(e){
                if(e.target == null || e.target === beginNode || e.target === link){
                    scene.remove(link);
                }
            });
            scene.mousemove(function(e){
                tempNodeZ.setLocation(e.x, e.y);
            });

            // scene.removeAllEventListener();
        }